<template>
  <div class="newsBox">
                    <h1>私募股权优质项目推荐</h1>
                    <div>
                        <div class="productDetali"  v-for="(item,index) in productlist" :key="index">
                            <div class="left">
                               <div class="left1">
                                 <p>投资领域</p>
                                 <p>{{item.investDirect}}</p>
                               </div>
                               <div class="left1">
                                 <p>投资期限</p>
                                 <p>{{item.productDeadline != "0" ? item.productDeadline : "永续"}}</p>
                               </div>
                            </div>
                            <div class="rightbox">
                                  <p class="right1">{{item.name.slice(0,10)}}</p>
                                  <p class="right2" v-html="item.moneyUseFor"></p>
                                  <nuxt-link :to="'/product/'+ item.pid"  target="_blank"> <div>查看详情</div></nuxt-link>
                            </div>
                        </div>
                    </div>
                </div>
</template>
<script>

export default {
  props: {
    productlist:{
      type:Array,
      default:function(){
        return []
      }
    }
  }
};
</script>
<style scoped>
.newsBox{
    overflow: hidden;    
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background: white;
    margin-top: 10px;
}
.newsBox h1{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    color: #cd9c54;
    border-bottom: 1px solid #ccc;
}
.productDetali{
    overflow: hidden;
    height: 200px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;

}
.left{
    width: 40%;
    margin-top: 20px;
}
.rightbox{
    overflow: hidden;
    width: 60%;
    color: #333;
    font-size: 18px;
}
.left p{
    height: 40px;
    line-height: 40px;
    width: 120px;
    border:1px solid #ccc; 
    text-align: center;
    font-size: 14px;
}

.right1{
    font-size: 18px;
    color: #333;
    margin-top: 66px;
}
.right2{
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 10px;
    text-overflow: ellipsis;
}
.left1 p:nth-child(1){
    color: #333;
}
.left1 p:nth-child(2){
    color: white;
    background: #cd9c54;
}
.rightbox div{
    height: 30px;
    width: 80px;
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 14px;
    background: #b41d24;
    margin: 30px;
}
</style>
